<template>
  <el-dialog
    v-el-drag-dialog
    class="dialog-small media-dialog"
    :title="title"
    :close-on-click-modal="!fetching"
    :close-on-press-escape="!fetching"
    :show-close="!fetching"
    :visible="visible"
    :width="!isShortDialog ? '900px' : '520px'"
    @update:visible="updateVisible"
    @open="openHandle"
  >
    <div class="container">
      <div class="container-left">
        <text-form
          ref="form5"
          :form="self_form"
          :op-type="opType"
          v-if="
            String(fileType) === FILETYPE.LOCAL_TEXT ||
            String(fileType) === FILETYPE.TEXT
          "
        />
        <qr-code-form
          ref="form6"
          :form="self_form"
          :op-type="opType"
          v-else-if="
            String(fileType) === FILETYPE.QRCODE ||
            String(fileType) === FILETYPE.PICTURE ||
            String(fileType) === FILETYPE.VIDEO ||
            String(fileType) === FILETYPE.AUDIO
          "
        />
        <!-- <rss-form
          :op-type="opType"
          v-else-if="fileType === '3'"
          /> -->
        <net-pic-form
          ref="form7"
          :form="self_form"
          :op-type="opType"
          v-else-if="
            String(fileType) === FILETYPE.NET_PICTURE ||
            String(fileType) === FILETYPE.WEB_CAPTURE
          "
        />
        <net-text-form
          ref="form8"
          :form="self_form"
          :op-type="opType"
          v-else-if="String(fileType) === FILETYPE.NET_TEXT"
        />
        <stream-form
          ref="form9"
          :form="self_form"
          :op-type="opType"
          v-else-if="String(fileType) === FILETYPE.STREAM"
        />
        <!-- <finance-pic-form
          :op-type="opType"
          v-else-if="fileType === '7' || fileType === '8'"
          /> -->
        <folder-form
          ref="form12"
          :form="self_form"
          :op-type="opType"
          v-else-if="String(fileType) === FILETYPE.FOLDER"
        />
      </div>
      <div v-if="!isShortDialog" class="container-right">
        <div class="title">预览</div>
        <div class="preview" :style="previewHeight">
          <template v-if="previewOpts.content">
            <img v-if="isPreviewImg" :src="previewOpts.content" />
            <p v-else>{{ previewOpts.content }}</p>
          </template>
        </div>
      </div>
    </div>

    <template slot="footer">
      <bs-confirm-button-icon
        v-if="String(fileType) !== FILETYPE.STREAM && !isShortDialog"
        :disabled="String(fileType) === FILETYPE.NET_TEXT"
        size="mini"
        :text="$t('预 览')"
        @click.native="preClick"
      />
      <bs-confirm-button-icon :disabled="fetching" size="mini" @click.native="okClick" />
      <bs-cancel-button-icon :disabled="fetching" size="mini" @click.native="cancelClick" />
    </template>
    <preview-ewm-dialog :visible.sync="showPreviewDialog" :form="self_form" :appendToBody="true"></preview-ewm-dialog>
  </el-dialog>
</template>

<script>
import TextForm from './Form/TextForm'
import QrCodeForm from './Form/QrCodeForm'
// import RssForm from './Form/RssForm'
import NetPicForm from './Form/NetPicForm'
import NetTextForm from './Form/NetTextForm'
import StreamForm from './Form/StreamForm'
// import FinancePicForm from './Form/FinancePicForm'
import FolderForm from './Form/FolderForm'
import PreviewEwmDialog from './PreviewEwmDialog'
import { validURL } from '@/utils/validate'

import { FILETYPE } from '../const'
export default {
  components: {
    TextForm,
    QrCodeForm,
    // RssForm,
    NetPicForm,
    NetTextForm,
    StreamForm,
    // FinancePicForm,
    FolderForm,
    PreviewEwmDialog
  },
  props: {
    fileType: {
      type: String,
      default: '12',
    },
    opType: {
      type: String,
      default: '1', // 1 新增 2 编辑
    },
    form: {
      type: Object,
      default() {
        return null
      },
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      FILETYPE,
      self_form: null,
      fetching: false, // 异步处理进行中标识符
      previewOpts: {
        // 预览控制
        content: '',
      },
      showPreviewDialog: false
    }
  },
  watch: {
    form(v) {
      if (!v) {
        this.self_form = null
      } else {
        this.self_form = {
          ...v,
        }
      }
    },
  },
  computed: {
    isShortDialog() {
      return String(this.fileType) === FILETYPE.FOLDER || this.opType !== '1'
    },
    title() {
      return this.opType === '1' ? this.$t('添加媒体') : this.$t('编辑媒体')
    },
    isPreviewImg() {
      return (
        String(this.fileType) === FILETYPE.QRCODE ||
        String(this.fileType) === FILETYPE.WEB_CAPTURE ||
        String(this.fileType) === FILETYPE.NET_PICTURE
      )
    },
    previewHeight() {
      if(String(this.fileType) === FILETYPE.QRCODE) {
        return 'height:423px'
      } else if(String(this.fileType) === FILETYPE.LOCAL_TEXT) {
        return 'height:353px'
      } else if(String(this.fileType) === FILETYPE.NET_PICTURE) {
        return 'height:436px'
      } else if(String(this.fileType) === FILETYPE.NET_TEXT) {
        return 'height:436px'
      } else if(String(this.fileType) === FILETYPE.NET_TEXT) {
        return 'height:436px'
      } else if(String(this.fileType) === FILETYPE.STREAM) {
        return 'height:353px'
      }
      return 'height:385px'
    }
  },
  created() {
    this.$eventBus.$on('previewEwm', this.handlePreviewEwm)
  },
  beforeDestroy() {
    this.$eventBus.$off('previewEwm')
  },
  methods: {
    updateVisible(v) {
      this.$emit('update:visible', v)
    },
    openHandle() {
      let formIndex = String(this.fileType)
      if (formIndex === FILETYPE.WEB_CAPTURE) formIndex = FILETYPE.NET_PICTURE
      else if (formIndex === FILETYPE.TEXT) formIndex = FILETYPE.LOCAL_TEXT
      else if (formIndex === FILETYPE.VIDEO
        || formIndex === FILETYPE.AUDIO
        || formIndex === FILETYPE.PICTURE) formIndex = FILETYPE.QRCODE

      this.$nextTick(() => {
        this.$refs['form'+formIndex] && this.$refs['form'+formIndex].clearValidate()
      })
      this.previewOpts.content = ''

      this.$eventBus.$emit('open',this.self_form.name)
    },
    okClick(v) {
      console.log(this.self_form, 'self_form')
      console.log(this.fileType, 'this.fileType')
      let formIndex = String(this.fileType)
      if(this.opType === '2') {
        if(formIndex === FILETYPE.VIDEO || formIndex === FILETYPE.PICTURE) {
          if(this.self_form.qrCode) {
            if(!validURL(this.self_form.qrCode)) {
              this.$message.error("二维码地址不合法")
              return
            }
          }
          if(this.self_form.qrCode) {
            if(!this.self_form.qrCodeW) this.self_form.qrCodeW = 300
            if(!this.self_form.qrCodeH) this.self_form.qrCodeH = 300
            if(!this.self_form.qrCodeX) this.self_form.qrCodeX = 0
            if(!this.self_form.qrCodeY) this.self_form.qrCodeY = 0
          } else {
            this.$delete(this.self_form, 'qrCodeW')
            this.$delete(this.self_form, 'qrCodeH')
            this.$delete(this.self_form, 'qrCodeX')
            this.$delete(this.self_form, 'qrCodeY')
          }
        }
      }
      if (formIndex === FILETYPE.WEB_CAPTURE) formIndex = FILETYPE.NET_PICTURE
      else if (formIndex === FILETYPE.TEXT) formIndex = FILETYPE.LOCAL_TEXT
      else if (
        formIndex === FILETYPE.VIDEO ||
        formIndex === FILETYPE.AUDIO ||
        formIndex === FILETYPE.PICTURE
      ) formIndex = FILETYPE.QRCODE

      this.$refs['form' + formIndex].validate((bool, err) => {
        if (bool) {
          this.fetching = true
          if (this.opType === '1') {
            this.$emit('addClick', this.self_form, this.fetchingEndCb)
          } else if (this.opType === '2') {
            if (this.fileType !== FILETYPE.FOLDER)this.$delete(this.self_form, 'duration')
            this.$delete(this.self_form, 'fileSize')
            this.$delete(this.self_form, 'length')
            this.$emit('updateClick', this.self_form, this.fetchingEndCb)
          } else {
            this.updateVisible(false)
          }
        } else {
          for (const key in err) {
            this.$message.error(err[key][0].message)
            break
          }
        }
      })
    },
    preClick() {
      if (this.isPreviewImg) {
        // TODO 将生成的图片地址传入
        this.previewOpts.content = this.self_form.content
      } else {
        this.previewOpts.content = this.self_form.content
      }
    },
    fetchingEndCb(stopClose) {
      this.fetching = false
      !stopClose && this.updateVisible(false)
    },
    cancelClick() {
      this.updateVisible(false)
    },
    handlePreviewEwm() {
      this.showPreviewDialog = true
    }
  },
}
</script>

<style>
  .media-dialog textarea {
    white-space: pre-wrap;
  }
</style>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';

.dialog-small {
  ::v-deep .el-dialog__body {
    padding: 0 !important;
  }
  ::v-deep .el-dialog__footer {
    display: flex;
    justify-content: center;
    border-top: 1px solid $bg-e9;
  }
  ::v-deep .el-dialog {
    height: 660px !important;
  }
}
.tips-text {
  text-align: center;
}

.container {
  display: flex;
  align-items: stretch;
  height: 100%;

  &-left {
    flex: 1;
  }

  &-right {
    flex-basis: 360px;
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 30px;
    margin-left: 21px;

    .title {
      height: 60px;
      line-height: 60px;
      font-size: $font-size-14;
      color: $font-66;
    }
    .preview {
      width: 360px;
      overflow: auto;
      border: 1px solid $bg-e9;
      position: relative;
      img {
        width: 100%;
      }
    }
  }
}
</style>
